<!--
 * @Description: 
 * @version: 
 * @Author: liurui
 * @Date: 2024-02-19 09:30:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-02-19 09:56:28
-->
<template>
    <div>

    </div>
</template>

<script setup lang="ts">
// 实现类型 PercentageParser<T extends string>。
// 根据规则 /^(\+|\-)?(\d*)?(\%)?$/ 匹配类型 T

// 匹配的结果由三部分组成，分别是：[`正负号`, `数字`, `单位`]，
// 如果没有匹配，则默认是空字符串

type PString1 = '';
type PString2 = '+85%';
type PString3 = '-85%';
type PString4 = '85%';
type PString5 = '85';

type R1 = PercentageParser<PString1>; // expected ['', '', '']
type R2 = PercentageParser<PString2>; // expected ["+", "85", "%"]
type R3 = PercentageParser<PString3>; // expected ["-", "85", "%"]
type R4 = PercentageParser<PString4>; // expected ["", "85", "%"]
type R5 = PercentageParser<PString5>; // expected ["", "85", ""]

type P1<T extends string> = T extends `${infer F extends '+' | '-'}${infer R}` ? 
    F : '';
// 似乎并不需要逐层匹配
type P2<T extends string> = T extends `${infer F extends '+' | '-'}${infer R}%` ? R : T

// 判断是否有 + - %号后，获得结果
// type P2<T extends string> = T extends `${infer F extends '+' | '-'}${infer M}%`
//   ? M
//   : T extends `${infer F extends '+' | '-'}${infer M}`
//   ? M
//   : T extends `${infer M}%`
//   ? M
//   : T;

type P3<T extends string> = T extends `${string}%` ? '%' : '';

type PercentageParser<T extends string> = [P1<T>, P2<T>, P3<T>];

</script>

<style scoped>

</style>